<!--
 * @Author: chenyulei yulei.chen@fa-software.com
 * @Date: 2023-12-18 15:52:46
 * @LastEditors: chenyulei yulei.chen@fa-software.com
 * @LastEditTime: 2023-12-20 10:16:40
 * @FilePath: /oms-ui/src/components/FooterMenu/components/footer-menu-item.vue
 * @Description: Lot Home Footer Menu Item
-->
<template>
  <div class="menu-group-item" @click="handleClickMenu(data)">
    <div v-if="data.hotKey" class="hot-key">
      {{ data.hotKey }}
    </div>
    <div class="menu-icon-content">
      <component :is="data.icon" />
    </div>
    <div
      class="menu-name"
      :class="{
        're-measurement': data.name === 'Re-Measurement',
        'add-measurement': data.name === 'Add-Measurement'
      }"
    >
      {{ data.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { MenuItem } from "../types";
import { registerHotKeys } from "@/utils/hotKeyManager";

defineOptions({
  name: "FooterMenuItem"
});

type Props = {
  data: any;
};

const props = withDefaults(defineProps<Props>(), {});

//#region emit
interface Emits {
  (e: "menu-click", ...args: any[]): void;
}
const emit = defineEmits<Emits>();
//#endregion

// 单个底部菜单点击事件
const handleClickMenu = (item: MenuItem) => {
  emit("menu-click", item);
};

onMounted(() => {
  if (props.data.hotKey) {
    registerHotKeys([
      {
        key: props.data.hotKey.toLowerCase(),
        callback: () => {
          handleClickMenu(props.data);
        }
      }
    ]);
  }
});
</script>

<style lang="scss" scoped>
.menu-group-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  height: 84px;
  padding: 10px 0;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  .hot-key {
    position: absolute;
    top: 6px;
    left: 0;
    padding: 2px 0;
    border-radius: 4px;
    line-height: 1;
    color: #fff;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(141, 141, 141, 1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
    font-size: 12px;
    font-weight: 700;
  }

  .menu-name {
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 14px;
    height: 28px;
    font-weight: 500;
    letter-spacing: 0;

    // 换行方式区别于其他模块 只能通过控制宽度实现
    &.re-measurement {
      width: 54px;
      word-break: break-all;
    }
    &.add-measurement {
      width: 58px;
      word-break: break-all;
    }
  }
}
</style>
